<template>
	<view class="top">
		<image :src="fx.imgurl" class="img" lazy-load/>
		<view class="big">{{fx.title}}</view>
		<view class="top1">
			<view>
				<span class="groy">面积</span><br>
				<span>{{fx.pf}}㎡</span>
			</view>
			<view>
				<span class="groy">楼层</span><br>
				<span>6-8层</span>
			</view>
			<view>
				<span class="groy">网络</span><br>
				<span>WIFI</span>
			</view>
			<view>
				<span class="groy">窗户</span><br>
				<span>有窗</span>
			</view>
		</view>
	</view>
	<view class="min">
		<view class="big">房间介绍</view>
		<view class="min1">
			<view class="view">
				<span class="sp1">床型</span>
				<span>{{fx.gg}}</span>
			</view>
			<view class="view">
				<span class="sp2">早餐</span>
				<span>不含早餐</span>
			</view>
		</view>
		<view class="min2">
			<view class="big1">房间设施</view>
			<view class="big2">卫浴设施</view>
			<view class="li">
				<view v-for="i in fjList" :key="i.id" class="view">
					<span class="sp3">{{i.name}}</span>
				</view>
			</view>
			<view class="big3">客房设置</view>
			<view class="li1">
				<view v-for="i in kfList" :key="i.id" class="view1">
					<span class="sp4">{{i.name}}</span>
				</view>
			</view>
		</view>
	</view>
	<view class="btm">
		<view class="price">￥{{fx.price}}元</view>
		<view>
			<button @click="reserve(fx)">订房间</button>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
const fx = ref<any>({});
const fjList=ref<any[]>([
	{id:1,name:'私人卫浴'},{id:2,name:'吹风机'},
	{id:3,name:'24小时热水'},{id:4,name:'拖鞋'},
	{id:5,name:'香皂'},{id:6,name:'牙刷牙膏'},
	{id:7,name:'毛巾'},{id:8,name:'浴巾'},
	{id:9,name:'沐浴露'},{id:10,name:'洗发水'}
])
const kfList=ref<any[]>([
	{id:1,name:'电视机'},
	{id:2,name:'热水壶'},
	{id:3,name:'空调'}
])
const loading = ref<boolean>(true);
const reserve =((item:any)=>{
	const itemStr = encodeURIComponent(JSON.stringify(item))
	uni.navigateTo({
		url:`/pages/reserve/reserve?item=${itemStr}`
	})
})
onLoad((options) => {
  if (options.item) {
	try {
	  const itemStr = decodeURIComponent(options.item);
	  fx.value = JSON.parse(itemStr);
	  loading.value = false;
	} catch (error) {
	  console.error('解析数据失败:', error);
	}
  }
});	
</script>

<style scoped lang="scss">
.top{
	padding: 10rpx;
	.img{
		width: 100%;
	}
	.big{
		font-size: 40rpx;
		font-weight: bold;
	}
	.top1{
		display: flex;
		justify-content: space-around;
		view{
			font-size: 28rpx;
			padding-top: 10rpx;
			.groy{
				color:gainsboro;
			}
		}
	}
}
.min{
	padding: 20rpx;
	.big{
		font-size: 32rpx;
		font-weight: bold;
	}
	.min1{
		padding-bottom: 40rpx;
		.view{
			font-size: 30rpx;
			.sp1{
				padding-right: 40rpx;
				font-size: 32rpx;
			}
			.sp2{
				padding-right: 40rpx;
				font-size: 32rpx;
			}
		}
	}
	.min2{
		.big1{
			font-size: 32rpx;
			font-weight: bold;
			padding-bottom: 10rpx;
		}
		.li{
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			width: 100%;
			height: 120rpx;
			padding-bottom: 10rpx;
			.view{
				.sp3{
					display: inline-block;
					width: 135rpx;
					text-align: center;
					margin-right: 5rpx;
					font-size: 24rpx;
					border: 1rpx solid rgb(1,84,120);
					color:rgb(1,84,120);
				}
			}
		}
		.big2{
			font-size: 32rpx;
		}
		.big3{
			font-size: 32rpx;
			// padding-bottom: 10rpx;
		}
		.li1{
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			width: 100%;
			height: 60rpx;
			.view1{
				.sp4{
					display: inline-block;
					width: 135rpx;
					text-align: center;
					margin-right: 5rpx;
					font-size: 24rpx;
					border: 1rpx solid rgb(1,84,120);
					color:rgb(1,84,120);
				}
			}
		}
	}
}
.btm {
  position: fixed;
  bottom: 30rpx;
  width: 100%;
  padding-top: 100rpx;
  display: flex;
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  align-items: center;
  .price {
    text-align: center;
    color: blue;
    height: 100rpx;
    background-color: whitesmoke;
  }
  view {
    width: 50%;
    button {
      background-color: blue;
      color: white;
    }
  }
}
</style>
